<template>
  <div id="rose-chart">
    <div id="main5" style="height: 70%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
  name: 'RoseChart',
  data() {
    return {
      option: {},
    }
  },
  methods: {
    showCharts() {
      var myChart = echarts.init(document.querySelector("#main5"));      //1:获取dom元素
      // 绘制图表
      const option = {
        title: {
          text: '不合格样本分布',
          top: 10,
          left: 10,
          textStyle: {
            color: '#fff' // 这里设置标题颜色为红色
          }
        },
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '70%'],
            startAngle: 180,
            endAngle: 360,
            data: [
              { value: 1048, name: '水果' },
              { value: 735, name: '蔬菜' },
              { value: 580, name: '畜禽肉蛋' },
              { value: 484, name: '水产品' },
              { value: 300, name: '其他类别' }
            ],
            label: {
              normal: {
                show: true,
                position: 'outside',
                textStyle: {
                  // 文字样式
                  color: '#fff',
                  fontSize: 12
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);                              //3：挂载配置项
    },

  },
  mounted() {
    this.showCharts();
  },
}

</script>

<style lang="less">
#rose-chart {
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  box-sizing: border-box;
}
</style>
